<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>05自定义JS对象</title>
</head>

<body>
    <table border="1px">
        <caption>商品列表</caption>
            <tr>
                <th>商品列表</th>
                <th>商品价格</th>
                <th>商品库存</th>
            </tr>
        <tbody id="contain"></tbody>
    </table>
    <script>
        // 1.实例化一个自带属性与方法的对象
        let p1 = {
            name: '李四',
            age: 18,
            eat: function () {
                console.log(this.name + "~~~" + this.age);
            }
        };
        console.log(p1);
        p1.eat();

        // 2.先定义一个空的对象,再动态的添加属性与方法
        let p2 = {};
        p2.name = '王五';
        p2.age = 30;
        p2.eat = function () {
            console.log(this.name + "~~~" + this.age);
        };
        console.log(p2);
        p2.eat();

        let productInfo = {
            title: 'Apple16 ProMax',
            price: 9999,
            color: '深空灰',
            size: '6.7寸',
            CPU: 'A16'
        }
        console.log(productInfo);

        let productArr = [
            { title: '华为Mate60', price: 8000, num: 200 },
            { title: '小米14', price: 5000, num: 1000 },
            { title: '苹果15', price: 10000, num: 800 },
            { title: 'OPPO Reno11', price: 2999, num: 10 }
        ]
        console.log(productArr[0]);

        // 获取当前页的table元素
        let table = document.querySelector('table');
        // 遍历上方的数组元素,拿到数组中的每一个商品对象
        for(let i = 0; i < productArr.length; i++){
            let tr = document.createElement('tr');
            // 创建标签标签
            let titleTd = document.createElement('td');
            let priceTd = document.createElement('td');
            let numTd = document.createElement('td');
            // 给标签赋值
            titleTd.innerHTML = productArr[i].title;
            priceTd.innerHTML = productArr[i].price;
            numTd.innerHTML = productArr[i].num;
            
            // 把每列的数据添加到 一行中
            tr.append(titleTd,priceTd,numTd);

            // 将一行的数据添加到Table中
            table.appendChild(tr);
        }

        
    </script>
</body>

</html>